import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v0/Components/Menu Migration" />

# Menu component Migration guide

## Overview:

`Menu` component is a replacement for `MenuButton`.

Before:

```tsx
import { MenuButton, Button } from '@fluentui/react-northstar';
const Component = () => <MenuButton trigger={<Button content="Open" title="Open" />} menu={['1', '2', '3']} />;
```

After:

```tsx
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  <Menu>
    <MenuTrigger>
      <Button>Open</Button>
    </MenuTrigger>
    <MenuPopover>
      <MenuList>
        <MenuItem>1</MenuItem>
        <MenuItem>2</MenuItem>
        <MenuItem>3</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>;
};
```

## How to migrate props:

| `MenuButton` props        | migrate guide                                                                                            |
| ------------------------- | -------------------------------------------------------------------------------------------------------- |
| as, className             | keep it as is                                                                                            |
| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document                                 |
| accessibility             | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) |
| ref, key                  | keep it as is                                                                                            |
| contextMenu               | use `openOnContext` instead                                                                              |
| menu                      | see [Migrate menu and trigger props](#./Migrate-`menu`-and-`trigger`-props) in this document             |
| mouseLeaveDelay           | replace with `hoverDelay`                                                                                |
| on                        | replace `on='hover'` with `openOnHover`; `on='context'` with `openOnContext`                             |
| onMenuItemClick           | use `onClick` with each `MenuItem` instead                                                               |
| defaultOpen               | keep it as is                                                                                            |
| onOpenChange              | keep it as is                                                                                            |
| open                      | keep it as is                                                                                            |
| trigger                   | see [Migrate menu and trigger props](#./Migrate-`menu`-and-`trigger`-props) in this document             |

Postioning props: `align`, `autoSize`, `flipBoundary`, `offset`,`overflowBoundary`,`popperRef`,`position`,`positionFixed`,`target`, `unstable_disableTether`, `unstable_pinned` are now attributes of the `positioning` prop.
v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `<MenuButton position="below" align="end" />` can be migrate to a string like `<Menu positioning="below-end" />`.
See [Migrate positioning props](../migrate-positioning.md) for more.

---

## Migrate style overrides

⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).

### Example for migrate boolean `variables`:

Before:

```tsx
// in COMPONENT_NAME.tsx
import { MenuButton, Button } from '@fluentui/react-northstar';

export const Component = () => (
  <MenuButton
    trigger={<Button content="Open" />}
    menu={['1']}
    variables={{ isBreakoutRoomsAssignmentMenuButton: true }}
  />
);

// in menu-button-styles.ts
export const menuButtonStyles = {
  root: ({ variables: { isBreakoutRoomsAssignmentMenuButton } }) => ({
    ...(isBreakoutRoomsAssignmentMenuButton && {
      width: '100%',
    }),
  }),
};
```

After:

```tsx
// in COMPONENT_NAME.tsx
import { useStyles } from './COMPONENT_NAME.styles.ts';
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  const classes = useStyles();
  return (
    <Menu className={classes.breakoutRoomsAssignmentMenuButton}>
      <MenuTrigger>
        <Button>Open</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem>1</MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  );
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  breakoutRoomsAssignmentMenuButton: {
    width: '100%',
  },
});
```

## Migrate `menu` and `trigger` props

`menu` and `trigger` props were moved to JSX children using `MenuTrigger` and `MenuItem` components:

Before:

```tsx
import { MenuButton, Button } from '@fluentui/react-northstar';
const Component = () => <MenuButton trigger={<Button content="Open" />} menu={['1. menu item', '2. menu item']} />;
```

After:

```tsx
import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Button } from '@fluentui/react-components';

export const Component = () => {
  <Menu>
    <MenuTrigger>
      <Button>Open</Button>
    </MenuTrigger>
    <MenuPopover>
      <MenuList>
        <MenuItem>1. menu item</MenuItem>
        <MenuItem>2. menu item</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>;
};
```
